<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.2.js"></script>
    <title>ChatGPT 聊天</title>
    <style type="text/css">
        HTML,
        body {
            height: 100%;
            width: 80%;
            margin: 0px;
            margin-left: 10%;
            font-size:14px;
        }
        .chat {
            margin-top: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
            height: 70%;
            background-color: rgb(255, 255, 255);
            overflow: auto;
        }
        input {
            width: 70%;
            height: 30px;
            margin-left: 0px;
        }
        #user_btn {
            margin-right: 0px;
            height: 34px;
            width: 60px;
            border: 1px solid rgb(255, 255, 255);
            border-radius: 3px;
        }
        #gpt_btn {
            margin-right: 0px;
            height: 34px;
            width: 60px;
            border: 1px solid rgb(255, 255, 255);
            border-radius: 3px;
        }
        .q_div {
            width: 100%;
            text-align: center;
        }
        .p1 {
            width: 70%;
            margin-left: 50px;
            /* margin-top: 20px; */
            background-color: rgb(255, 255, 255);
            float: left;
            text-align: left;
        }
        .msg1 {
            float: left;
            border: 1px solid rgb(108, 108, 108);
            border-radius: 3px;
            background-color: rgb(108, 108, 108);
            padding: 5px;
            margin-bottom: 5px;
            color: rgb(255, 255, 255);
        }
        .p2 {
            width: 70%;
            margin-right: 50px;
            margin-top: 20px;
            background-color: rgb(255, 255, 255);
            float: right;
            text-align: right;
        }
        .msg2 {
            float: right;
            border: 1px solid rgb(0, 159, 80);
            border-radius: 3px;
            background-color: rgb(0, 159, 80);
            padding: 5px;
            margin-bottom: 5px;
        }
        .title {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="title"><h4>ChatGPT</h4></div>
    <div class="chat">
        <!-- 聊天记录 -->
    </div>
    <br/>
    <div class="q_div">
        <!-- <button id="gpt_btn">发送</button> -->
        <input type="text" value="" placeholder="请输入你的问题">
        <button id="user_btn">发送</button>
    </div>
    <script type="text/javascript">
        const URL = 'http://' + window.location.host;
        const chat_div = document.getElementsByClassName('chat');
        $('input:text:first').focus();
        var $inp = $('input:text');
        $inp.bind('keydown', function (e) {
            var key = e.which;
            if (key == 13) {
                e.preventDefault();
                user_send();
                scrollToBottom();
            }
        });

        gpt_send("Hello there, how may I assist you today?");
        // 用户发送信息
        $('#user_btn').click(function(){
            user_send();
            scrollToBottom();
        });
        // AI回答信息
        $('#gpt_btn').click(function(){
            gpt_send();
            scrollToBottom();
        });
        function user_send() {
            var user_msg = $('input').val();
            if (user_msg.trim().length == 0) {
                return;
            }
            var msg = '<div class="p2"><div class="msg2">' + user_msg + '</div></div>';
            $('.chat').append(msg);
            var params = {
                'question': user_msg
            }
            post(params);
        }
        function gpt_send(data) {
            if (data.trim().length == 0) {
                return;
            }
            // var ai_msg = $('input').val();
            var msg = '<div class="p1"><div class="msg1">' + data + '</div></div>';
            $('.chat').append(msg);
        }
        function scrollToBottom() {
            scrollIntoView();
            $('input').val('');
        }
        function post(msg) {
            var params = JSON.stringify(msg);
            $.ajax({  
                url: URL + '/api/ask',  
                type: 'POST',  
                data: params,
                dataType: 'JSON',
                contentType: 'application/json',
                processData: false,
                success: function(result){
                    if (result.code == 200) {
                        gpt_send(result.msg); 
                    }else{
                        gpt_send("正在尝试重新连接服务器 ..."); 
                        console.log(result.msg);
                    }
                },  
                error: function(e) {
                    gpt_send("正在尝试重新连接服务器 ..."); 
                    console.log(e);
                }
            });
        }
        setInterval(scrollIntoView,200);
        function scrollIntoView() {
            var end_msg1 = $('.chat').children("div:last-child");
            end_msg1[0].scrollIntoView(false);
        }
    </script>
</body>
</html>